<template>
    <div class="container">
        <div class="product" v-for="(item, index) in productList" :key="index">
            <div class="header">
                <div class="img">
                    <img :src="item.image">
                </div>
                <div class="info">
                    <div class="title">
                        {{ item.title }}
                    </div>
                    <div class="datatime">
                        <countDown :is-day="true" :tip-text="'倒计时 '" :day-text="' 天 '" :hour-text="' 时 '"
                            :minute-text="' 分 '" :second-text="' 秒'" :datatime='Date.parse(item.datatime) / 1000'>
                        </countDown>
                    </div>
                    <div class="result">
                        已砍至：{{ item.bargainPrice }}元
                    </div>
                </div>

            </div>
            <div class="footer">
                <div class="f-info">
                    活动进行中
                </div>
                <div class="f-button">
                    <van-button @click="cancel(item.bargainId)" style="margin-right:15px ;" plain hairline color="gray"
                        type="primary" size="small">取消活动
                    </van-button>
                    <van-button @click="goBuy(item.bargainId)" type="danger" size="small">继续砍价</van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { bargainUserList, bargainUserCancel } from "@/api/bargain.js"
import countDown from "@/components/CountDown.vue"
export default {
    data() {
        return {
            productList: []
        }
    },
    components: {
        countDown
    },

    methods: {
        getProductList() {
            bargainUserList().then(res => {
                if (res.status === 200) {
                    this.productList = res.data
                } else {
                    this.$toast('加载失败 请刷新页面或稍后重试')
                }
            })
        },
        cancel(id) {
            const newId = parseInt(id)
            const data = {
                bargainId: newId,
                from: "666"
            }
            bargainUserCancel(data).then(res => {
                if (res.status === 200) {
                    this.$toast('取消成功')
                    this.getProductList()
                    location.reload()
                } else {
                    this.$toast('取消失败')
                }
            })
        },
        goBuy(id) {
            const newId = parseInt(id)
            this.$router.push({path:'/bargainDetail',query: {bargainId : newId}})
        }

    },
    created() {
        this.getProductList()
    }

}
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

.container {
    box-sizing: border-box;
    background: #f5f5f5;
    width: 100%;
    height: 100%;
}

.product {
    width: 100%;
    height: 180px;
    margin-top: 2px;

    .header {
        width: 100%;
        height: 120px;
        background: #ffffff;

        .img {
            width: 86px;
            height: 86px;

            float: left;
            margin-left: 15px;
            margin-top: 15px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }
        }

        .info {
            width: 240px;
            height: 100px;

            float: left;
            margin-left: 5%;
            margin-top: 10px;

            .title {
                margin-top: 5px;
                font-size: 16px;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
            }

            .datatime {
                margin-top: 15px;
                color: gray;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
            }

            .result {
                margin-top: 15px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;

            }
        }
    }

    .footer {
        width: 100%;
        height: 60px;
        background: #ffffff;
        border-top: 1px solid gray;

        .f-info {
            color: orange;
            font-size: 14px;
            margin-top: 20px;
            margin-left: 20px;

            text-align: center;
            display: inline-block;
        }

        .f-button {
            float: right;
            margin-top: 15px;
            margin-right: 20px;
        }
    }
}
</style>